<template>
  <div class="home-nav">
    <van-grid :border="false" :column-num="5">
      <van-grid-item
        v-for="(item, index) in navList"
        :key="index"
        :to="item.jumpUrl"
      >
        <van-image :src="item.address" width="0.5rem" height="0.5rem" />
        <span class="home-nav-title"> {{ item.name }} </span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const navList = computed(() => store.state.home.navList);
    onMounted(() =>
      store.dispatch({
        type: "home/getNavList",
      })
    );
    return {
      navList,
    };
  },
});
</script>

<style lang="stylus" scoped>
.home-nav {
  // height 1.4rem
  .home-nav-title {
    font-size: 0.12rem;
  }

  .van-grid {
    border-radius: 0.05rem 0.05rem 0 0;
    background-color: white;
    overflow: hidden;

    /deep/ .van-grid-item__content {
      padding: 0.04rem 0;
    }
  }
}
</style>
